<template>
  <div class="setting-r-content">
    <div class="search-content">
      <Col
        class="panel search-panel"
        span="24"
      >
      <Form
        :model="formHeader"
        :label-width="80"
        inline
      >
        <FormItem label="企业名称：">
          <Select
            clearable
            v-model="formHeader.companyId"
            style="width: 200px;"
          >
            <Option
              :value="item.id"
              v-for="(item,index) in companyList"
              :key="index"
              :label="item.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="恢复状态：">
          <RadioGroup v-model="formHeader.status" type="button">
            <Radio :label="null">全部</Radio>
            <Radio :label="1">已恢复</Radio>
            <Radio :label="2">未恢复</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="margin-l">
          <Button
            type="primary"
            @click="_queryThing"
          >查询</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="w1 setting-scroll__content">
      <Row class="setting-content__row">
        <!-- 表格 -->
        <Col
          class="panel table-panel"
          :span="24"
        >
        <Table
          :columns="columns"
          :data="tableDatas"
          border
          style="width: 100%;"
          :loading="pageInfo.loading"
        ></Table>
        </Col>

        <!-- 分页 -->
        <Col
          class="panel page-panel cf"
          :span="24"
          style="margin-bottom: 10px;"
        >
        <Page
          :total="pageInfo.total"
          :page-size="15"
          :current.sync="pageInfo.page"
          class="fr"
          @on-change="switchThePaging"
        ></Page>
        </Col>

        <Col
          :span="24"
          class="page-bottom"
        >
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { getOdErrorLists, getCompanyListOnOd } from "@/api";
import { alarmColumns } from "./material";
export default {
  mounted() {
    this.getCompanyList();
    this.getInintalState();
  },
  data() {
    const vm = this;
    return {
      formHeader: {
        companyId: null,
        status: null
      },
      pageInfo: {
        page: 1,
        total: 0,
        loading: false
      },
      columns: [...alarmColumns(vm)],
      tableDatas: [],
      companyList: []
    };
  },
  methods: {
    _queryThing() {
      this.pageInfo.page = 1;
      this.getInintalState();
    },

    getCompanyList() {
      getCompanyListOnOd({
        size: 100000
      }).then(res => {
        if (res.code == 200) {
          this.companyList = res.data;
        }
      });
    },

    getInintalState() {
      const vm = this,
        { page } = vm.pageInfo,
        { companyId, status } = vm.formHeader;
      let params = {
        page,
        companyId,
        status,
        size: 15
      };
      vm.pageInfo.loading = true;

      getOdErrorLists(params).then(res => {
        if (res.code == 200) {
          const {
            list,

            total
          } = res.data;
          vm.pageInfo.total = total;
          vm.tableDatas = list;
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        } else {
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        }
      });
    },

    switchThePaging(index) {
      const vm = this;
      vm.pageInfo.page = index;
      vm.getInintalState();
    }
  }
};
</script>
